<template>
	<view class="container">
		<!-- 头部 start -->
		<view class="head">
			<u-navbar :is-fixed="false" :border-bottom="false" :is-back="false" title=""
				:background="{ background: '#101334' }">
				<view class="nav-wrap">
					<picker mode="selector" :range="marketArr" range-key="name" @change="changePicker"
						class="picker-box">
						{{ market }}
						<u-icon name="arrow-down" class="arrow" size="18" color="#C9C9C9"></u-icon>
					</picker>
				</view>
			</u-navbar>
		</view>

		<view class="total-box">
			<view class="title">总资产折合(USDT)</view>
			<view class="asset">
				<text class="amount">{{totalUsdAmount }}</text>
				<text class="cny">≈￥{{totalCnyAmount | fixed(2) }}</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="i in 10">
				<view class="top">
					<text class="coin">BTC</text>
					<text class="money">25886235.5561</text>
				</view>
				<view class="bottom">
					<text class="desc">SHIBA INU</text>
					<text class="money">$186.96</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {commonMixin} from '@/common/mixin/mixin.js'
	import {
		fakePosition,
	} from "@/api/mock/home.js";
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'

	export default {
		mixins: [commonMixin],
		computed:{
			...mapState('tabbar', ['tabbarArr']),
			...mapState('deal', ['dspName']),
			...mapState('user', ['isLogin']),
			...mapGetters('tabbar', ['getTabbar'])
		},
		data() {
			return {
				market: '',
				marketArr: [],
				list: [],
				totalUsdAmount: '0.23112323',
				totalCnyAmount: '8341.76333',
				
			};
		},
		onShow() {
			console.log('是否登录', this.isLogin)
			console.log(this.getTabbar,'onShow', this.tabbarArr, this.dspName)
			// this.loadData();
			// vuex 修改变量
			this.setDspName("BTC/AQIE")
			console.log('loadData aqie',this.dspName)
			
		},
		onPullDownRefresh() {
			this.loadData();
		},
		onLoad() {
			// 后续将改为与后端联动
			// 加载banner数据
			fakePosition().then(data => {
				this.market = data.position;
				this.marketArr = data.positionArr;
			});

		},
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			...mapActions('assets', ['accountList']),
			...mapMutations('deal', ['setDspName']),

			//请求数据
			async loadData(){
				
				this.accountList().then(res =>{
					console.log('assetsList', res)
					this.data = res.data
					uni.stopPullDownRefresh();
				}).catch(error =>{
					
				})
			},
			changePicker(e) {
				this.market = this.marketArr[e.detail.value];
			},

		}
	}
</script>

<style lang='scss' scoped>
	.container {
		min-height: 100vh;
		background: #101334;
		color: #ffffff;

		.nav-wrap {
			width: 100%;
			padding: 0 22rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.picker-box {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #ffffff;

				.arrow {
					margin-left: 10rpx;
				}
			}
		}

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;
			.item {
				width: 675rpx;
				height: 90rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 60rpx;
				.top {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10rpx;
					.coin, .money {
						font-family: Microsoft YaHei;
						font-size: 30rpx;
						font-weight: 600;
					}
					.money{
						color: #ff9900;
					}
				}
				.bottom{
					display: flex;
					justify-content: space-between;
					.desc {
						font-size: 24rpx;
						color: cornflowerblue;
					}
				
				}
			}
		}

	}

	.total-box {
		font-size: $font-base;
		padding: 10upx 30upx 40upx 30upx;

		.title {
			padding-bottom: 10upx;
		}

		.amount {
			font-size: 60upx;
			font-weight: 100upx;
			
			font-family: Microsoft YaHei;
			color: #ffffff;
			margin-right: 40rpx;
		}

		.cny {
			font-size: 30upx;
			font-style: italic;
			padding-left: 20upx;

		}

	}
</style>
